<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<!-- link Tigra Hints script file -->
	<script language="JavaScript" src="tigra_hints.js"></script>
	<style>
		.hintsClass {
			font-family: tahoma, verdana, arial;
			font-size: 12px;
			background-color: #f0f0f0;
			color: #000000;
			border: 1px solid #808080;
			padding: 5px;
		}
	</style> 
</head>

<body>
<div>
  <p>akndkasndnasidn iasdias diasndiniasi dnasin diasndaisnd ianiasidnasidniasdiwqid iasd io <img src="/images/agent.jpg" alt="this is alt tag" width="144" height="219" onmouseover="myHint.show(1)" onmouseout="myHint.hide()" /></p>
  <p>&nbsp;</p>
</div>
<script language="JavaScript">

// configuration variable for the hint object, these setting will be shared among all hints created by this object
var HINTS_CFG = {
	'wise'       : true, // don't go off screen, don't overlap the object in the document
	'margin'     : 10, // minimum allowed distance between the hint and the window edge (negative values accepted)
	'gap'        : 20, // minimum allowed distance between the hint and the origin (negative values accepted)
	'align'      : 'bctl', // align of the hint and the origin (by first letters origin's top|middle|bottom left|center|right to hint's top|middle|bottom left|center|right)
	'css'        : 'hintsClass', // a style class name for all hints, applied to DIV element (see style section in the header of the document)
	'show_delay' : 0, // a delay between initiating event (mouseover for example) and hint appearing
	'hide_delay' : 200, // a delay between closing event (mouseout for example) and hint disappearing
	'follow'     : true, // hint follows the mouse as it moves
	'z-index'    : 100, // a z-index for all hint layers
	'IEfix'      : false, // fix IE problem with windowed controls visible through hints (activate if select boxes are visible through the hints)
	'IEtrans'    : ['blendTrans(DURATION=.3)', null], // [show transition, hide transition] - nice transition effects, only work in IE5+
	'opacity'    : 90 // opacity of the hint in %%
};
// text/HTML of the hints
var HINTS_ITEMS = [
	'short definition',
	'tooltip for item2 with some <b>HTML</b>',
	'tooltip for item3<br />This one is multi line',
	'tooltip for item4',
	'tooltip for item5'
];

var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
</script> 
<table width="10%" border="0" cellspacing="2">
  <tr>
    <td>&nbsp;</td>
    <td onmouseover="myHint.show(3)" onmouseout="myHint.hide()">asdasd</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
